<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>任务九：使用HTML/CSS实现一个复杂页面</title>
		<link rel="stylesheet" type="text/css" href="./task09.css"/>
	</head>
	<body>
		
		<header>
			<div class="site-logo">
				<img src="css/img/logo.gif"/>
			</div>
			
			<div class="login">
				<img src="css/img/logo-r.gif"/>
				<a href="#">登录</a>
			</div>
			
			<div class="search">
				<input type="text" name="search" id="search" value="" />
				<img src="css/img/search.gif"/>
			</div>
		</header>
		
		
		<aside>
			<div class="user">
				<div class="user-logo">
					<img src="css/img/head-logo.gif"/>	
				</div>
				
				<div class="user-name">
					<a href="#" class="name">Psilo</a><br />
					
				
				</div>
				<div class="user-star">
					<ul>
						<li><a href="#" class="star">110</a></li>
						<li><p>收藏</p></li>
					</ul>
				</div>
				
				<div class="user-follower">
					<ul>
						<li><a href="#" class="follower">313</a></li>
						<li><p>粉丝</p></li>
					</ul>
					
				</div>
			</div>
				
			<div class="per-table">
				<ul>
					<li class="list-check">
						<a href="#"><img src="css/img/userTab.gif"/> 个人报表</a>
						<ul>
							<li><a href="#"><img src="css/img/arrow.gif"/><img src="css/img/dir.gif"/> 文件一</a></li>
							<li>
								<a href="#"><img src="css/img/arrow-c.gif"/><img src="css/img/dir-c.gif"/> 文件二</a>
								<ul>
									<li><a href="#"><img src="css/img/file-c.gif"/> 文档一</a></li>
									<li><a href="#"><img src="css/img/file.gif"/> 文档二</a></li>
								</ul>
							</li>
							<li><a href="#"><img src="css/img/arrow.gif"/><img src="css/img/dir.gif"/> 文件三</a></li>
						</ul>
					</li>
					
					<li><a href="#"><img src="css/img/star.gif"/> 个人收藏</a></li>
					<li><a href="#"><img src="css/img/share.gif"/> 我的分享</a></li>
					<li><a href="#"><img src="css/img/star.gif"/> 图库</a></li>
					<li><a href="#"><img src="css/img/star.gif"/> 成长记录</a></li>
					<li><a href="#"><img src="css/img/userMes.gif"/> 账户信息</a></li>
				</ul>
			</div>
			
		</aside>
		
		<div class="container">
			<div class="nav">
				<p><a href="#">C站 /	个人报表 / 文件一 / 文档一</a></p>
			</div>
			
			<div class="main">
				<div class="part-one">
					
					<div class="checkout">
						<label for="checkout">查询项</label>
						<select class="blue-arrwo" name="checkout" id="checkout">
							<option value="1">第一项</option>
							<option value="2">第二项</option>
						</select>
					</div>
					
					
					<div class="buyer">
						<label for="buyer">买方</label>
						<select class="black-arrow long-input" name="buyer" id="buyer">
							<option value="1">小A</option>
							<option value="2">小B</option>
						</select>
					</div>
					
					<div class="solder">
						<label for="solder">卖方</label>
						<select class="black-arrow long-input" name="solder" id="solder">
							<option value="1">小C</option>
						</select>
					</div>
					
					<div class="change">
						<img src="css/img/change.gif"/>
						<a href="#">换</a>
					</div>
					
					<div class="date">
						<label for="date">日期</label>
						<input class="long-input" type="date" name="date" id="date" value="2017-09-26" />
					</div>
				
					<div class="time">
						<label for="time">总耗时</label>
						<select name="time" class="black-arrow " id="time">
							<option value="1">8天</option>
						</select>
					</div>
					
					<div class="people">
						<label for="people">人数</label>
						<select class="black-arrow" name="people" id="people">
							<option value="1">10人</option>
						</select>
					</div>
				
					<div class="chengjiao">
						<label for="chengjiao">成交项</label>
						<select name="chengjiao" class="black-arrow long-input" id="chengjiao">
							<option value="1">10项</option>
						</select>
					</div>
					
					<div class="search-button">
						<a href="#">搜索</a>
					</div>
					
				</div>
				
				<div class="part-two">
					
					<div class="lt">
						<a href="#"><</a>
					</div>
					
					<div class="gt">
						<a href="">></a>
					</div>
					
					<div class="price price-one">
						<span>10:00 am</span>
						<p>￥<span>1200</span></p>
					</div>
					
					<div class="price price-two">
						<span>11:00 am</span>
						<p>￥<span>1300</span></p>
					</div>
					
					<div class="price price-three">
						<span>12:00 am</span>
						<p>￥<span>1200</span></p>
					</div>
					
					<div class="price price-four">
						<span>01:00 pm</span>
						<p>￥<span>1400</span></p>
					</div>
					
					<div class="price price-five">
						<span>02:00 pm</span>
						<p>￥<span>1500</span></p>
					</div>
					
					<div class="price price-six">
						<span>03:00 pm</span>
						<p>￥<span>1800</span></p>
					</div>
					
					<div class="history">
						<a href="#"><p>历史查询</p></a>
					</div>
					
				</div>
				
				<div class="part-three">
					<p>2017年4月份统计</p>
					<div class="part-main">
						<div class="box box-one">
							<span>133311</span>
							<span>成交量</span>
							<div></div>
						</div>
						
						<div class="box box-two">
							<span>133311</span>
							<span>成交量</span>
							<div></div>
						</div>
						
						<div class="box box-three">
							<span>133311</span>
							<span>成交量</span>
							<div></div>
						</div>
						
						<div class="box box-four">
							<span>133311</span>
							<span>成交量</span>
							<div></div>
						</div>
					</div>
				</div>
				
				
				<div class="part-four">
					<div class="l-part">
						<div class="header">
							第一组项目
						</div>
						
						<div class="project-item">
							<ul>
								<li>
									<input type="radio" name="project" checked="checked" class="tab-radio"/>
									<span>项目一</span>
									<div class="tab item-1">
										<table cellspacing="0">
											<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td></tr>
										</table>
									</div>
								</li>
								<li>
									<input type="radio" name="project" class="tab-radio"/>
									<span>项目二</span>
									<div class="tab item-2">
										<table cellspacing="0">
											<tr><td>购买材料二</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料二</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料二</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料二</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料二</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td></tr>
										</table>
									</div>
								</li>
								<li>
									<input type="radio" name="project" class="tab-radio"/>
									<span>项目三</span>
									<div class="tab item-3">
										<table cellspacing="0">
											<tr><td>购买材料三</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料三</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料三</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料三</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料三</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td></tr>
										</table>
									</div>
								</li>
								<li>
									<input type="radio" name="project" class="tab-radio"/>
									<span>项目四</span>
									<div class="tab item-4">
										<table cellspacing="0">
											<tr><td>购买材料一</td><td>购买材料四一</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料一</td><td>购买材料四</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料一</td><td>购买材料四</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料一</td><td>购买材料四</td><td>购买材料一</td><td>购买材料一</td></tr>
											<tr><td>购买材料一</td><td>购买材料四</td><td>购买材料一</td><td>购买材料一</td></tr>
										</table>
									</div>
								</li>
								<li>
									<input type="radio" name="project" class="tab-radio"/>
									<span>项目五</span>
									<div class="tab item-5">
										<table cellspacing="0">
											<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料五</td><td>购买材料一</td></tr>
											<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料五</td><td>购买材料一</td></tr>
											<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料五一</td><td>购买材料一</td></tr>
											<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料五</td><td>购买材料一</td></tr>
											<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料五</td><td>购买材料一</td></tr>
										</table>
									</div>
								</li>
							</ul>
						</div>
						
					</div>
					
					<div class="r-part">
						<div class="header">
							第一组项目
						</div>
						
						<div class="form">
							<table>
								<thead>
									<tr>
										<td colspan="2">
											<span>标题</span>
											项目报表三
										</td>
									</tr>
								</thead>
								
								<tbody>
									<tr>
										<td class="t-price">
											<span>价格</span>
											￥158
										</td>
										<td>
											<span>负责人</span>
											小A
										</td>
									</tr>
									
									<tr class="detail">
										<td colspan="2">
											<span>详细描述</span>
											该项目目前负责人是...
										</td>
									</tr>
								</tbody>
								
							</table>
							
							<input type="checkbox" name="zunshou" id="zunshou" checked="checked"/>
							<label for="zunshou"><span>遵守保密协议</span></label>
							
							<div class="search-button button-position">
								<a href="#">搜索</a>
							</div>
						</div>
						
						
					</div>
					
					
				</div>
				
				
				<div class="part-five">
					<div class="l-part">
						<div class="header">
							日历
						</div>
						
						<div class="canlader">
							<select class="arrow-down time" name="year">
								<option value="2016">2016</option>
							</select>
							
							<select  class="mouth" name="month">
								<option value="4">4月</option>
							</select>
							
							<select  class="arrow-down date" name="date">
								<option value="1">标注日期</option>
							</select>
							
							<input type="button" name="today" id="today" value="返回今天"/>
						</div>
						
						<div>
							<table class="date-all" cellpadding="0" cellspacing="0">
								<tr class="week">
									<td>一</td>
									<td>二</td>
									<td>三</td>
									<td>四</td>
									<td>五</td>
									<td>六</td>
									<td>日</td>
								</tr>
								<tr class="day">
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td class="jieri">
										<p>1</p>
										<span>愚人节</span>
									</td>
									<td>
										<p>2</p>
										<span>廿五</span>
									</td>
									<td>
										<p>3</p>
										<span>廿六</span>
									</td>
								</tr>
								<tr class="day">
									<td>
										<p>4</p>
										<span>廿七</span>
									</td>
									<td class="jieri">
										<p>5</p>
										<span>清明</span>
									</td>
									<td>
										<p>6</p>
										<span>廿九</span>
									</td>
									<td>
										<p>7</p>
										<span>三月</span>
									</td>
									<td>
										<p>8</p>
										<span>初二</span>
									</td>
									<td class="checked">
										<p>9</p>
										<span>初三</span>
									</td>
									<td>
										<p>10</p>
										<span>初四</span>
									</td>
								</tr>
								<tr class="day">
									<td>
										<p>11</p>
										<span>初五</span>
									</td>
									<td class="checked">
										<p>12</p>
										<span>初六</span>
									</td>
									<td>
										<p>13</p>
										<span>初七</span>
									</td>
									<td>
										<p>14</p>
										<span>初八</span>
									</td>
									<td>
										<p>15</p>
										<span>初九</span>
									</td>
									<td>
										<p>16</p>
										<span>初十</span>
									</td>
									<td>
										<p>17</p>
										<span>十一</span>
									</td>
								</tr>
								<tr class="day">
									<td>
										<p>18</p>
										<span>十二</span>
									</td>
									<td class="checked">
										<p>19</p>
										<span>十三</span>
									</td>
									<td>
										<p>20</p>
										<span>十四</span>
									</td>
									<td>
										<p>21</p>
										<span>十五</span>
									</td>
									<td>
										<p>22</p>
										<span>十六</span>
									</td>
									<td>
										<p>23</p>
										<span>十七</span>
									</td>
									<td>
										<p>24</p>
										<span>十八</span>
									</td>
								</tr>
								<tr class="day">
									<td>
										<p>25</p>
										<span>十九</span>
									</td>
									<td>
										<p>26</p>
										<span>廿十</span>
									</td>
									<td>
										<p>27</p>
										<span>廿一</span>
									</td>
									<td>
										<p>28</p>
										<span>廿二</span>
									</td>
									<td>
										<p>29</p>
										<span>廿三</span>
									</td>
									<td>
										<p>30</p>
										<span>廿四</span>
									</td>
									<td></td>
								</tr>
							</table>
						</div>
					</div>
					
					<div class="r-part">
						<div class="header">
							汽车行业品牌榜
						</div>
						
						<div class="rank">
							<table border="1" cellspacing="0" cellpadding="0">
								<tr>
									<th>
										排名
									</th>
									<th>
										品牌
									</th>
									<th>
										搜索指数
									</th>
								</tr>
								
								<tr>
									<td>
										1
									</td>
									<td>
										大众
									</td>
									<td>
										48912001
										<span class="bar"><span class="hot hot-bar1"></span></span>
										
									</td>
								</tr>
								
								<tr>
									<td>
										2
									</td>
									<td>
										丰田
									</td>
									<td >
										29307333
										<span class="bar"><span class="hot hot-bar2"></span></span>
										
									</td>
								</tr>
								
								<tr>
									<td>
										3
									</td>
									<td>
										奥迪
									</td>
									<td>
										23139070
										<span class="bar">
										<span class="hot hot-bar3"></span></span>
									</td>
								</tr>
								
								<tr>
									<td>
										4
									</td>
									<td>
										本田
									</td>
									<td >
										22885564
										<span class="bar"><span class="hot hot-gt hot-bar4"></span></span>
										
									</td>
								</tr>
								
								<tr>
									<td>
										5
									</td>
									<td>
										福特
									</td>
									<td>
										22324792
										<span class="bar"><span class="hot hot-gt hot-bar5"></span>
									</td>
								</tr>
								
								<tr>
									<td>
										6
									</td>
									<td>
										宝马
									</td>
									<td>
										21444077
										<span class="bar"><span class="hot hot-gt hot-bar6"></span>
										
									</td>
								</tr>
								
								<tr>
									<td>
										7
									</td>
									<td>
										现代
									</td>
									<td>
										20114969
										<span class="bar"><span class="hot hot-gt hot-bar7"></span>
										
									</td>
								</tr>
								
								<tr>
									<td>
										8
									</td>
									<td>
										起亚
									</td>
									<td>
										19251680
										<span class="bar"><span class="hot hot-gt hot-bar8"></span>
										
									</td>
								</tr>
								
								<tr>
									<td>
										9
									</td>
									<td>
										奔驰
									</td>
									<td>
										19172837
										<span class="bar"><span class="hot hot-gt hot-bar9"></span>
										
									</td>
								</tr>
								
								<tr>
									<td>
										10
									</td>
									<td>
										别克
									</td>
									<td>
										18544027
										<span class="bar"><span class="hot hot-gt hot-bar10"></span>
										
									</td>
								</tr>
							</table>
						</div>
						
						
						
					</div>
				</div>
				
				
				
				
			</div>
			
		</div>
	</body>
</html>
